<html>
<head>
  <style>
    table { border:1dip solid black; border-collapse:collapse; }
    td { border:1dip solid black; padding:3dip; }
    th { border:1dip solid black; padding:3dip 1em;
         background: #ddd; text-align:center;}
  </style>  
  <script type="module">

  import {$,on,loadLibrary } from "@sciter";
  if(!globalThis.SQLite)
    globalThis.SQLite = loadLibrary("sciter-sqlite");
 
  on("click","#test", function()
  {  
    var db = SQLite.open(":memory:"); // in memory, temporary DB

    //debug log: db;

    var r = db.exec("create table stocks (date text, trans text, symbol text, qty real, price real)" );
        $("#result").innerText = r.toString();

        // as a string   
        db.exec("insert into stocks values ('2006-01-05','BUY','RHAT',100,35.14)" );
        db.exec("insert into stocks values ('2006-01-05','BUY','BANT',10,5.23)" );

        // with params:
        db.exec("insert into stocks values (?,?,?,?,?)", ["2006-04-05", "BUY", "MSOFT", 1000, 72.00] );

        db.exec("insert into stocks values (?,?,?,?,?)", ["2006-04-06", "SELL", "IBM", 500, 53.00] );

        db.exec("update stocks trans = 'DDD'")

    var rs = db.exec("select * from stocks order by price");

    if ( rs )
      showRecordset(rs);
    else
      $("#result").innerText = "Wrong type:" + rs;

    db.close();
  });

  function showRecordset(rs)
  {
    //debug show: rs; 
    
    var headers = [];
    for (var n = 0; n < rs.length; ++n)
    {
      const title = `${rs.name(n,"database")}:${rs.name(n,"table")}:${rs.name(n,"field")}`;
      headers.push(<th title={title}>{rs.name(n)}</th>);
    } 

    var rows = [];
   
    function cells() {
      var list = [];
      for (var n = 0; n < rs.length; ++n)
        list.push(<td>{rs[n]}</td>);
      return list;
    }

    do { rows.push(<tr>{cells()}</tr>); } while( rs.next() );

    document.body.append(<table>
      <thead><tr>{headers}</tr></thead>
      <tbody>{rows}</tbody>
    </table>);
  }

  document.ready = function() {
    if(!SQLite) 
      $(body).content(<h1>Open this sample in usciter!</h1>);
  }


  </script>  
</head>
<body>
  <button #test>Test it</button>
  <text #result />
</body>
</html>